import React from "react";
import { Outlet, NavLink, Route, Routes } from "react-router-dom";


import MyNavLink from "./components/MyNavLink";
import About from "./pages/About";
import Home from "./pages/Home";
import News from "./pages/Home/News";
import Message from "./pages/Home/Message";

import "./App.css";

export default function App() {
  return (
    <div>
      {/* 
      1. 注册路由
      2. routes: 匹配一次后不会再继续匹配后面的路由
       */}
      <Routes>
        <Route
          path="/"
          element={
            <div>
              <h2>Router</h2>
              {/* 编写路由链接 */}
              <nav>
                <MyNavLink to="about">About</MyNavLink>
                &nbsp;|&nbsp;
                <MyNavLink to="home">Home</MyNavLink>
              </nav>
              <Outlet /> 
              {/* 
              Outlet, 路由与导航链接同级
              */}
            </div>
          }
        >
          <Route path="about" element={<About />} />
          {
            /* 模糊匹配*:Link中的to按/分割的顺序要与Route中的path一致,且只能多不能少
               没有*则精准匹配
             */
          }
          <Route path="home/*" element={<Home />} >
            {/* 嵌套路由的两种写法, 这里配置子路由时, 导航链接那里就只需要加一个<Outlet />即可, 注意, 父级路由的path必须是模糊匹配
            <Route path="news" element={<News />} />
            <Route path="message" element={<Message />} />
        */}
          </Route>
          <Route
            path="*"
            element={
              <main style={{ padding: "1rem" }}>
                <p>There's nothing here!</p>
              </main>
            }
          />
        </Route>
      </Routes>
    </div>
  );
}
